<template>
  <div class="overlay-fadein">
    <transition name="fade">
      <div v-show="mixIsShow" class="overlay" @click.stop="clickoverlay" />
    </transition>
    <slot />
  </div>
</template>
<script>
import mixShow from '@/mixins/show'
export default {
  name: 'Overlay',
  props: {
    persistent: {
      type: Boolean,
      default: false
    }
  },
  mixins: [mixShow()],
  mounted () {
    document.addEventListener('keydown', e => {
      if (this.show && e.keyCode === 27) {
        this.clickoverlay()
      }
    })
  },
  methods: {
    clickoverlay () {
      if (!this.persistent) {
        this.$emit('click-overlay')
        this.$emit('update:show', false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.overlay-fadein {
  position: fixed;
  z-index: 9999;
  .overlay {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
